<template>
  <div class="editForm-wrapper">
    <el-dialog
      v-if="method === 'add' || 'edit'"
      :title="title"
      :close-on-click-modal="false"
      v-dialogDrag
      :visible.sync="visible"
    >
      <el-form
        label-width="92px"
        :model="areaForm"
        :rules="dataRule"
        ref="areaForm"
        v-loading="loading"
      >
        <el-form-item label="地区名称" prop="name">
          <el-input v-model="areaForm.parent.name"></el-input>
        </el-form-item>
        <el-form-item label="级别" prop="type">
          <el-select clearable v-model="areaForm.parent.type" :disabled="!isChild">
            <el-option label="国家" value="1"></el-option>
            <el-option label="省" value="2"></el-option>
            <el-option label="市" value="3"></el-option>
            <el-option label="区/县" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="统一代码" prop="code">
          <el-input v-model="areaForm.parent.code"></el-input>
        </el-form-item>
      </el-form>
      <!-- <section class="hint-container">
        *注意：地区名称、级别、统一代码均位必填内容，在保存时检验是否正确
      </section> -->
      <span slot="footer" class="dialog-footer">
        <div class="footer-input">
          <el-button
          size="small"
          v-if="method != 'view'"
          type="primary"
          @click="doSubmit()"
          v-noMoreClick
          >确定</el-button
        >
        <el-button size="small" @click="visible = false">取消</el-button>

        </div>

      </span>
    </el-dialog>
    <el-dialog
      width="520px"
      :title="title"
      :close-on-click-modal="false"
      v-dialogDrag
      :visible.sync="addChildVisible"
    >
      <el-form label-width="80px">
        <el-form-item label="父级名称" prop="parentName">
          <el-input v-model="inputForm.parent.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="父级级别" prop="parentType" >
          <el-select clearable v-model="inputForm.parent.type" disabled>
            <el-option label="国家" :value="'1'"></el-option>
            <el-option label="省" :value="'2'"></el-option>
            <el-option label="市" :value="'3'"></el-option>
            <el-option label="区/县" :value="'4'"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="子级名称" prop="name">
          <el-input v-model="inputForm.name"></el-input>
        </el-form-item>
        <el-form-item label="子级级别" prop="type">
          <el-select clearable v-model="inputForm.type">
            <el-option label="国家" :value="'1'"></el-option>
            <el-option label="省" :value="'2'"></el-option>
            <el-option label="市" :value="'3'"></el-option>
            <el-option label="区/县" :value="'4'"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="统一代码" prop="code">
          <el-input v-model="inputForm.code"></el-input>
        </el-form-item>
      </el-form>
      <!-- <section class="hint-container">
        *注意：地区名称、级别、统一代码均位必填内容，在保存时检验是否正确
      </section> -->
      <span slot="footer" class="dialog-footer">
        <div class="footer-input">
          <el-button
            size="small"
            v-if="method != 'view'"
            type="primary"
            @click="doSubmit()"
            v-noMoreClick
            >确定</el-button
          >
          <el-button size="small" @click="addChildVisible = false"
            >取消</el-button
          >

        </div>

      </span>
    </el-dialog>
  </div>
</template>

<script>
import {editArea} from '@/api/area.js'
import SelectTree from '@/components/treeSelect/treeSelect.vue'
export default {
  data () {
    return {
      areaForm: {
        type: '1',
        code: '',
        id: '',
        name: '',
        parent: {
          code: '',
          id: '',
          name: '',
          parentIds: '',
          type: '1'
        }
      },
      isChild: false,
      areaVale: '',
      areaListTreeProps: {
        label: 'name',
        children: 'children'
      },
      visible: false,
      addChildVisible: false,
      loading: false,
      method: '',
      title: '新增',
      inputForm: {
        id: 0,
        parent: {
          code: '',
          id: '',
          name: '',
          parentIds: '',
          types: ''
        }

      },
      dataRule: {
        'areaForm.parent.name': [{ required: true, message: '名称不能为空', trigger: 'blur' }],
        type: [
          { required: false, message: '区域类型不能为空', trigger: 'change' }
        ],
        'areaForm.parent.code': [
          { required: true, message: '区域编码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  components: {
    SelectTree
  },
  methods: {
  	handleClose(done) {
		this.$Msg.confirm({
			title:'您确定要关闭吗？',
			content:this.GLOBAL.FORM_CLOSE_TIPS,
			confirmCall:()=>{
				done();
			}
		})
	},
    init (method, obj) {
      this.method = method
      if (method === 'add') {
        this.areaForm.id = obj.id
        this.title = '新增区域'
        this.areaForm = {
          type: '1',
          code: '',
          id: '',
          name: '',
          parent: {
            code: '',
            id: '',
            name: '',
            parentIds: '',
            type: '1'
          }
        }
        this.visible = true
      } else if (method === 'edit') {
        this.title = '修改区域'
        this.areaForm = obj
        console.log(this.areaForm.parent)
        this.visible = true
      } else if (method === 'addChild') {
        this.title = '新增地区子级'

        this.inputForm = obj

        console.log(obj)
        this.inputForm.parent.type = obj.parent.type
        this.addChildVisible = true
        console.log(this.addChildVisible)
      }
    },
    // 表单提交
    doSubmit () {
      if (this.method === 'add') {
        this.$refs['areaForm'].validate((valid) => {
          if (valid) {
            this.$set(this.areaForm, 'parentId', 0)
            this.$set(this.areaForm, 'parentIds', '')
            this.areaForm.code = this.areaForm.parent.code
            this.areaForm.name = this.areaForm.parent.name
            this.loading = true
            editArea(this.areaForm).then(({ data }) => {
              console.log(data)
              this.loading = false
              if (data && data.success) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500
                })
                this.$emit('refreshDataList', 'add')
                this.visible = false
                this.addChildVisible = false
              }
            })
          }
        })
      } else if (this.method === 'addChild') {
        let areaForm = {}
        areaForm.parentId = this.inputForm.id
        areaForm.parentIds = this.inputForm.parent.parentIds
        areaForm.name = this.inputForm.name
        areaForm.code = this.inputForm.code
        areaForm.type = this.inputForm.type
        editArea(areaForm).then(({ data }) => {
          console.log(data)
          this.loading = false
          if (data && data.success) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500
            })
            this.visible = false
            this.addChildVisible = false
            this.$emit('refreshDataList', 'addChild')
          }
        })
      } else if (this.method === 'edit') {
        let areaForm = {}
        areaForm.id = this.areaForm.id
        console.log(this.areaForm)
        areaForm.name = this.areaForm.parent.name
        areaForm.code = this.areaForm.parent.code
        console.log(areaForm)
        editArea(areaForm).then(({ data }) => {
          console.log(data)
          this.loading = false
          if (data && data.success) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500
            })
            this.visible = false
            this.addChildVisible = false
            this.$emit('refreshDataList', 'edit')
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.hint-container {
  width: 393px;
  height: 11px;
  font-size: 12px;
  font-weight: 400;
  color: #ff1f1f;
}
</style>
